<template>
  <div class="r_content">
    <mt-header title="修改信息">
      <router-link :to="{name:'mine'}" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <p>用户名：<input type="text" v-model="username" readonly><i class="iconfont icon-edit-1-copy" @click="revise('username')"></i></p>
    <p>手机号：<input type="text" v-model="userphone" readonly><i class="iconfont icon-edit-1-copy" @click="revise('userphone')"></i></p>
    <p>所在地：<input type="text" v-model="userarea" readonly> <i class="iconfont icon-edit-1-copy" @click="revise('userarea')"></i></p>
    <span>保存</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '1',
      userphone: '2',
      userarea: '3',
    };
  },
  methods: {
    revise(type) {
      if (type == 'username') {
        this.$messagebox.prompt('用户名').then(({ value }) => {
          this.username = value;
        });
      } else if (type == 'userphone') {
        this.$messagebox.prompt('手机号').then(({ value }) => {
          this.userphone = value;
        });
      } else {
        this.$messagebox.prompt('所在地').then(({ value }) => {
          this.userarea = value;
        });
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.r_content
  background #f1f1f1
  height 100vh
  p
    background #ffffff
    height 0.6rem
    line-height 0.6rem
    margin-top 0.2rem
    padding 0 0.2rem
    input
      width 70%
      display inline-block
    i
      float right
      display inline-block
      height 100%
  span
    height 0.6rem
    line-height 0.6rem
    display block
    width 96%
    margin 0.2rem auto
    background #26a2ff
    border-radius 0.1rem
    color #ffffff
    text-align center
</style>

